<template>
  <CommonPage>
    <template #custom>
      <AppCard class="rounded-8 p-24" :line="levelColor">
        <n-flex justify="space-between">
          <MyInfo size="big" :text="data.detail.projectName">
            <template #before>
              <div
                v-if="data.detail.projectLevel"
                class="h-28 w-28 flex-shrink-0 rounded-16 text-center font-size-16 color-#FFF font-bold lh-28"
                :style="{ background: levelColor }"
              >
                {{ data.detail.projectLevel.at(-1) }}
              </div>
            </template>
            <template #after>
              <AsyncSelect
                v-model:value="projectId"
                :options="data.versionOptions"
                :clearable="false"
              />
              <div
                v-if="data.detail.projectStartNode"
                class="h-36 flex-shrink-0 rounded-4 bg-#F4F5F7 px-12 text-14 color-#686F7C lh-36"
              >
                {{ $format(data.detail.projectStartNode) }}
              </div>
            </template>
          </MyInfo>
          <n-flex>
            <n-button
              v-permission="`project_update`"
              @click="$projectForm?.handleEdit({ id: projectId })"
            >
              修改
            </n-button>
            <n-button
              v-permission="`project_version`"
              color="#0A56D8FF"
              @click="$projectForm?.handleAdd"
            >
              创建版本
            </n-button>
          </n-flex>
        </n-flex>
        <n-grid :cols="2" y-gap="20" class="mt-20 w-1000">
          <n-gi>
            <MyLabel icon="02" label="产品负责人">
              <MyInfo
                v-for="(item, index) in data.detail.productHeaderList"
                :key="index"
                :src="item.avatar"
                :text="item.name"
              />
            </MyLabel>
          </n-gi>
          <n-gi>
            <MyLabel icon="02" label="任务总工期" :value="`${data.detail.taskDuration || 0}天`" />
          </n-gi>
          <n-gi>
            <MyLabel icon="07" label="研发负责组">
              {{ data.detail.developGroupName }}
              <MyInfo
                v-if="data.detail.developmentHeader"
                :src="data.detail.developmentHeader.avatar"
                :text="data.detail.developmentHeader.name"
              />
            </MyLabel>
          </n-gi>
          <n-gi>
            <MyLabel
              icon="12"
              label="待处理任务总工期"
              :value="`${data.detail.incompleteDuration || 0}天`"
            />
          </n-gi>
          <n-gi>
            <MyLabel icon="02" label="研发成员">
              <MyInfo
                v-for="(item, index) in data.detail.rdMembersList"
                :key="index"
                :src="item.avatar"
                :text="`${item.personName}(${item.executeName})`"
              />
            </MyLabel>
          </n-gi>
          <n-gi>
            <MyLabel
              icon="03"
              label="待处理任务人均工期"
              :value="`${data.detail.incompleteDurationPerson || 0}天`"
            />
          </n-gi>
          <n-gi>
            <MyLabel icon="05" label="项目类型">
              <div
                v-if="data.detail.projectTypeName"
                class="h-20 bg-#F4F5F7 p-x-7 font-size-12 color-#3A3E45 font-bold lh-20"
              >
                {{ data?.detail?.projectTypeName?.replaceAll(',', '；') }}
              </div>
            </MyLabel>
          </n-gi>
          <n-gi>
            <MyLabel icon="08" label="内部提测节点" :value="$format(data.detail.insideTestNode)" />
          </n-gi>
          <n-gi>
            <MyLabel
              icon="11"
              label="任务环节"
              :value="data?.detail?.taskStageName?.replaceAll(',', '>')"
            />
          </n-gi>
          <n-gi>
            <MyLabel icon="08" label="上线节点" :value="$format(data.detail.releaseTestNode)" />
          </n-gi>
        </n-grid>
      </AppCard>
      <AppCard class="mt-16 min-h-400 rounded-8 p-24">
        <MyTabs v-model="active" class="mb-28" :options="tabs" />
        <component :is="compMap[active]" :detail="data.detail" @reset="methods.getDetail()" />
      </AppCard>
      <ProjectForm
        ref="$projectForm"
        :default-name="data.detail.projectName"
        :project-pid="data.detail.projectPid"
        @result="methods.onProject"
      />
    </template>
  </CommonPage>
</template>
<script setup lang="jsx">
import { upperFirst } from 'lodash-es'
import { useAuthTabs } from '@/hooks/useAuthTabs'
import { getSelArrDicts } from '@/api/dict'
import * as projectApi from '@/api/project'
defineOptions({ name: 'ProjectDetail' })
const route = useRoute()
const projectId = ref(route.query.id)
const $projectForm = ref(null)
const { tabs, active } = useAuthTabs([
  { label: '项目信息', value: 'ProjectInfo', key: 'project_info' },
  { label: '阶段状态', value: 'StageStatus', key: 'periodStatus' },
  { label: '进度管理', value: 'ProgressManage', key: 'progressManagement' },
  { label: '范围管理', value: 'RangeManage', key: 'scope' },
  { label: '客户资料', value: 'CustomerInfo', key: 'customer_info' },
  { label: '风险管理', value: 'RiskManage', key: 'risk' },
  { label: '测试管理', value: 'TestManage', key: 'testManagement' },
  { label: '会议纪要', value: 'MeetingMinutes', key: 'meetingRecords' },
  { label: '工期记录', value: 'DurationRecord', key: 'project_duration' },
  { label: '项目日志', value: 'ProjectLog', key: 'projectLog' },
  { label: '运维管理', value: 'OperateManage', key: 'OMManagement' },
])
const data = reactive({
  detail: {},
  levelOptions: [],
  versionOptions: [],
})
const methods = reactive({
  async getDetail() {
    data.detail = (await projectApi.info({ id: projectId.value })).data
    methods.getVersionOptions(data.detail.projectPid)
  },
  async getLevelOptions() {
    const res = await getSelArrDicts({ codes: 'PROJECT_LEVEL' })
    data.levelOptions = res?.data?.PROJECT_LEVEL || []
  },
  onProject(type) {
    if (type === 'add') {
      $message.success(`新增项目成功!`)
      methods.getDetail()
    } else if (type === 'edit') {
      $message.success(`修改项目成功!`)
      methods.getDetail()
    }
  },
  async getVersionOptions(projectPid) {
    const res = await projectApi.versionList({ projectPid })
    data.versionOptions = res.data.map((item) => ({
      label: `V.${item.projectVersion}.${item.projectVersionMinor} ${item.projectPhaseName}`,
      value: item.id,
    }))
  },
})
const levelColor = computed(() => {
  return data.levelOptions.find((item) => item.code === data.detail.projectLevel)?.color || ''
})
onBeforeMount(() => {
  methods.getLevelOptions()
  methods.getDetail()
  active.value = tabs.value.find((item) => item.value === upperFirst(route.query.active))
    ? upperFirst(route.query.active)
    : (tabs.value[0] || {}).value
})
watch(
  () => projectId.value,
  (val) => {
    val && methods.getDetail()
  }
)
function generateAsyncComponent(key) {
  return defineAsyncComponent({
    loader: () => import(`./modules/${key}.vue`),
  })
}
const compMap = Object.fromEntries(
  tabs.value.map((item) => [item.value, generateAsyncComponent(item.value)])
)
</script>
<style lang="scss" scoped></style>
